<template>
	<view class="zone">
		<Header title="邀请海报"></Header>
		<view class="main">
			<view class="box">
				<image class="bg" src="http://image.qxgm.site/tdz/img/invite/mg-04.png" mode="widthFix" />

				<view class="posabox">
					<image class="yun" src="http://image.qxgm.site/tdz/img/public/m_yun.png" mode="widthFix"></image>
					<image class="ping1" src="http://image.qxgm.site/tdz/img/public/ping1.png" mode="widthFix"></image>

					<view class="sbox">
						<view class="ingo">
							<view class="kaba">
								<image class="header" :src="userinfo.avatar" mode="widthFix"></image>
								<view class="name">
									{{userinfo.username}}
								</view>
							</view>
							<view class="tish">
								截图保存 微信扫一扫注册下载
							</view>

						</view>

						<view class="info">
							<view class="qrimg">
								<tki-qrcode ref="qrcode" cid="qrcode" :lv="1" :val="val" :size="140" :loadMake="true" />
							</view>
							<view class="invitebox">
								邀请码:{{invite_code}}
							</view>
						</view>
					</view>

				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userinfo: uni.getStorageSync('userinfo'),
				invite_code: uni.getStorageSync('invite_code'),
				autoplay: false,
				val: "http://tdzh.cpgm8.cn/index.php/api/qr/" + uni.getStorageSync("invite_code"),
			};
		}
	}
</script>

<style lang="less">
	.zone {
		min-height: 100vh;
		background: url(http://image.qxgm.site/tdz/img/public/p_bg.png) no-repeat;
		background-size: 100% 100%;
	}

	.main {
		margin-top: -70px;
	}

	.box {
		width: 100%;
		position: relative;

		.bg {
			width: 100%;
		}

		.posabox {
			max-width: 480px;
			width: 100%;
			position: fixed;
			bottom: 0;
			left: 50%;
			transform: translateX(-50%);
			box-sizing: border-box;

			.yun {
				position: absolute;
				top: -24%;
				left: 0;
				width: 44%;
				z-index: 9;
			}

			.ping1 {
				width: 100%;
				display: flex;
			}

			.sbox {
				display: flex;
				align-items: center;
				justify-content: space-between;
				background: url(http://image.qxgm.site/tdz/img/public/ping2.png);
				background-size: 100% auto;
				padding: 0px 6px 0;
			}

			.qrimg {
				display: inline-block;
				padding: 10px;
				box-sizing: border-box;
				background: url(http://image.qxgm.site/tdz/img/invite/mg-02.png) no-repeat;
				background-size: 100% 100%;
			}

			.invitebox {
				font-weight: normal;
				font-size: 15px;
				color: #333333;
				line-height: 24px;

			}
		}

	}

	.kaba {
		display: flex;
		align-items: center;
	}

	.ingo {
		display: flex;
		flex-direction: column;
	}

	.header {
		width: 50px;
		margin-right: 5px;
		border-radius: 50%;
	}

	.tish {
		font-size: 15px;
		color: #333333;
		font-weight: normal;
		line-height: 15px;
		margin-top: 20px;
	}

	.info {
		text-align: center;
	}
</style>